<template>
  <div>
    <div
      style="
        border-bottom: 1px solid #e3e3e3;
        font-size: 16px;
        padding: 30px;
        position: relative;
      "
    >
      <van-icon
        @click="goBack"
        name="arrow-left"
        style="position: absolute; left: 10px; top: 20px"
      />
      <span style="position: absolute; left: 50%; top: 20px">
        {{ currentCategory.obj.name }}</span
      >
    </div>

    <div v-if="categoryProducts.obj && categoryProducts.obj.length > 0">
      <div
        style="
          flex-wrap: wrap;
          padding: 20px;
          display: flex;
          justify-content: space-between;
        "
      >
        <div
          v-for="(i, index) in categoryProducts.obj"
          :key="index"
          style="
            border: 1px solid #f3f3f3;
            width: calc((100vw - 150px) / 2);
            margin-right: 10px;
            margin-bottom: 10px;
            border-radius: 15px;
            text-align: center;
            padding: 20px;
          "
        >
          <div>
            <img
              :src="i.img"
              style="border-radius: 15px; width: 100%; height: 100%"
            />
          </div>
          <div style="margin-bottom: 30px">
            <span>{{ i.name }}</span>
          </div>

          <div style="display: flex; justify-content: space-between">
            <span>{{ i.unit }}{{ i.price }}</span>
            <span
              style="
                padding: 5px 14px;
                border-radius: 10px;
                background: #53b175;
                color: #fff;
                font-size: 16px;
              "
              >+</span
            >
          </div>
        </div>
      </div>
    </div>
    <van-empty description="还没有产品哦" v-else />
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { showDialog } from "vant";
import { userStore } from "../store/piniaStore";
import { myMixin } from "../mixin.js";
const { errorMsgBox, successMsgBox } = myMixin();

const useUserStore = userStore();
const router = useRouter();
let categorys = useUserStore.categorys;
let products = useUserStore.products;

let categoryProducts = reactive({ obj: [] });

let currentCategory = reactive({ obj: {} });
onMounted(() => {
  currentCategory.obj = JSON.parse(
    window.localStorage.getItem("currentCategory")
  );
  //获取类目下的所有产品
  products.forEach((element) => {
    if (element.category_id == currentCategory.obj.id) {
      categoryProducts.obj.push(element);
    }
  });
});
function goBack() {
  router.push("search");
}
</script>
